<nz-layout>
  <!-- 菜单 -->
  <nz-sider nzCollapsible [(nzCollapsed)]="isCollapsed" [nzTrigger]="null" [nzWidth]="250">
    <a href="javascript:;" class="logo" style="display: flex">
      <div class="logo-icon"></div>
      <div class="logo-text">配置管理系统</div>
    </a>
    <ul nz-menu [nzTheme]="'dark'" [nzMode]="isCollapsed ? 'vertical' : 'inline'">
      <app-menu></app-menu>
    </ul>
  </nz-sider>
  <!-- 内容 -->
  <nz-layout>
    <!-- 头部 -->
    <nz-header class="header">
      <div nz-row [nzType]="'flex'" [nzJustify]="'space-between'">

        <i class="anticon trigger" [class.anticon-menu-fold]="!isCollapsed" [class.anticon-menu-unfold]="isCollapsed" (click)="isCollapsed=!isCollapsed"></i>

        <div nz-row [nzType]="'flex'" [nzJustify]="'space-between'">
          <!-- 系统消息 -->
          <!-- <a class="sysTips" href="javascript:;">
            <nz-badge [nzCount]="5">
              <ng-template #content>
                <i class="anticon anticon-bell"></i>
              </ng-template>
            </nz-badge>
          </a> -->
          <!-- 个人操作 -->
          <nz-dropdown>
            <a class="ant-dropdown-link" nz-dropdown>
              <div nz-row [nzType]="'flex'" [nzJustify]="'space-around'" [nzAlign]="'middle'">
                <nz-avatar nzIcon="user" nzSrc="//zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"></nz-avatar>
                {{currentUser.UserName}}
              </div>
            </a>

            <ul nz-menu>
              <li nz-menu-item [routerLink]="['./personal']" routerLinkActive="ant-dropdown-menu-item-selected">
                <i class="anticon anticon-user"></i>
                个人中心
              </li>
              <!-- <li nz-menu-item [nzDisable]="true">
                <i class="anticon anticon-setting"></i>
                设置
              </li> -->
              <li nz-menu-divider></li>
              <li nz-menu-item [routerLink]="['/']">
                安全退出
              </li>
            </ul>
          </nz-dropdown>
        </div>

      </div>
    </nz-header>

    <nz-content>
      <router-outlet></router-outlet>
    </nz-content>

    <nz-footer style="text-align: center;">Copyright ©2017 dingchen</nz-footer>
  </nz-layout>
</nz-layout>